<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>法务服务平台</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="robots" content="all,follow">
  <!-- Bootstrap CSS-->
  <link rel="stylesheet" href="/other/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
  <link rel="stylesheet" href="/other/css/style.default.css" id="theme-stylesheet">
</head>
<body>
<div class="page login-page">
  <div class="container d-flex align-items-center">
    <div class="form-holder has-shadow">
      <div class="row">
        <!-- Logo & Information Panel-->
        <div class="col-lg-6">
          <div class="info d-flex align-items-center">
            <div class="content">
              <div class="logo">
                <h1>欢迎注册</h1>
              </div>
              <p>法务注册界面</p>
            </div>
          </div>
        </div>
        <!-- Form Panel    -->
        <div class="col-lg-6 bg-white">

          <div class="form d-flex align-items-center">
            <form action="/login/registerSubmit" onsubmit="return checkVcode()" name="myForms" method="post">
              <div class="content">
                <div class="form-group">
                  <input id="register-username" class="input-material" type="text" name="loginName" placeholder="请输入用户名/姓名" >
                  <div class="invalid-feedback">
                    用户名必须在6~11位之间
                  </div>
                </div>
                <div class="form-group">
                  <input id="register-password" class="input-material" type="password" name="password" placeholder="请输入密码"   >
                  <div class="invalid-feedback">
                    密码必须在6~12位之间
                  </div>
                </div>
                <div class="form-group">
                  <input id="register-passwords" class="input-material" type="password" name="checkPassword" placeholder="确认密码"   >
                  <div class="invalid-feedback">
                    两次密码必须相同 且在6~12位之间
                  </div>
                </div>
                <div class="form-group">
                  普通用户<input type="radio" name="type" value="普通用户">
                </div>
                <div class="form-group">
                  <input id="register-email" class="input-material" type="text" name="email" placeholder="请输入Email"   >
                  <button id="sendNewEmail" type="button" class="btn btn-primary" onclick="check($sendNewEmail,60)" onsubmit="">获取验证码</button>
                  <div class="invalid-feedback">
                    输入电子邮箱格式不对
                  </div>
                </div>

                <div class="form-group">
                  <input id="register-vCode" class="input-material" type="text" name="vCode" placeholder="请输入验证码"   >
                  <div class="invalid-feedback">
                    输入电子邮箱格式不对
                  </div>
                </div>

                <div class="form-group">
                  <input type="submit" id="regbtn" class="btn btn-primary" value="注册">
                </div>
                <small>已有账号?</small><a href="/login/login" class="signup">&nbsp;登录</a>
              </div>
            </form>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- JavaScript files-->
<script src="/other/js/jquery.min.js"></script>
<script src="/js/jquery-3.4.1.js"></script>
<script src="/other/js/bootstrap.min.js"></script>
<script>

  var $sendNewEmail=$("#sendNewEmail");
  function time(o,wait) {
    var $this = $(o);
    if (wait == 0) {
      $this.css('pointer-events', '');
      $this.css("background","#549ff2");
      $this.html("发送验证码");
      wait = 60;
    } else {
      $this.css("pointer-events","none");
      $this.css("background","#999999");
      $this.html("重新发送(" + wait + ")");
      wait--;
      setTimeout(function() {time(o,wait)}, 1000)
    }
  }

  function  check(o,wait) {
    var name = checkLoginName();
    if (name==false)
      return false;
    var pwd = checkPassword();
    if (pwd==false)
      return false;
    var eM = checkEmail();
    if (eM==false)
      return false;

    if (name&&pwd&&eM){   //执行发送邮箱验证码
      var email = document.getElementById("register-email").value;
      var loginName = document.getElementById("register-username").value;
      $.ajax({
        url:"/center/sendEmail",
        type:"post",
        data:{"loginName":loginName,"email":email},
        async:false,
        success:function(result){
          if(result==true){
            time(o,wait);
          }
        }
      });
      return true;
    }
    else
      return false;
  }

  function checkLoginName() {
    var loginName=document.getElementById("register-username").value;
    var bools = false;
    if(loginName.length<6){
      alert("用户名长度不能低于6位");
      return false;
    }
    $.ajax({
      url:"/login/checkLoginName",
      type:"post",
      data:{"loginName":loginName},
      async:false,
      success:function(result){
        if(result.code==200){
          alert("该用户名已存在");
        }else {
          bools = true;
        }
      }
    });
    return bools;
  }

  function checkPassword() {
    var password=document.getElementById("register-password").value;
    var checkPassword=document.getElementById("register-passwords").value;
    if (password==""||password==null){
      alert("密码不能为空");
      return false;
    }
    if (password.length<6){
      alert("密码长度不能低于6位");
      return false;
    }
    if (password!=checkPassword){
      alert("两次输入密码不一致");
      return false;
    }
    return true;
  }

  function checkVcode() {
    var vCode=document.getElementById("register-vCode").value;
    var loginName = document.getElementById("register-username").value;
    var password = document.getElementById("register-password").value;
    var type = document.forms['myForms']['type'].value;
    var email = document.getElementById("register-email").value;
    var flagPass = false;
    //验证码验证
    if (loginName==""||loginName==null){
      alert("登录名不能空");
      return false;
    }
    if (password==""||password==null){
      alert("密码不能空");
      return false;
    }
    if (type==""||type==null){
      alert("用户类型不能空");
      return false;
    }
    if (email==""||email==null){
      alert("email不能空");
      return false;
    }
    if (vCode.length!=4){
      alert("请输入4位验证码");
      return false;
    }

    $.ajax({
      url:"/login/checkVcode",
      type:"post",
      data:{"loginName":loginName,"vCode":vCode},
      async:false,
      success:function(result){
        if (result.code==200){
          flagPass=true;
        }else if(result.code==100){
          flagPass=false;
        }else {
          alert("不能注册！");
          flagPass=false;
        }
      },
    });
    if (flagPass==false){
      alert("验证码不正确");
    }
    return flagPass;
  }

  function  checkEmail() {
    var email=document.getElementById("register-email").value;
    var bools = false;
    if (email==""||email==null){
      alert("email为空");
      return false;
    }
    $.ajax({
      url:"/login/checkEmail",
      type:"post",
      data:{"email":email},
      async:false,
      success:function(result){
        if(result.code==200){
          alert("邮箱已被注册");
        }else {
          bools = true;
        }
      }
    });
    return bools;
  }


  $(function(){
    /*错误class  form-control is-invalid
    正确class  form-control is-valid*/
    var flagName=false;
    var flagPas=false;
    var flagPass=false;
    /*验证用户名*/
    var name,passWord,passWords;
    $("#register-username").change(function(){
      name=$("#register-username").val();
      if(name.length<6||name.length>11){
        $("#register-username").removeClass("form-control is-valid")
        $("#register-username").addClass("form-control is-invalid");
        flagName=false;
      }else{
        $("#register-username").removeClass("form-control is-invalid")
        $("#register-username").addClass("form-control is-valid");
        flagName=true;
      }
    })
    /*验证密码*/
    $("#register-password").change(function(){
      passWord=$("#register-password").val();
      if(passWord.length<6||passWord.length>12){
        $("#register-password").removeClass("form-control is-valid")
        $("#register-password").addClass("form-control is-invalid");
        flagPas=false;
      }else{
        $("#register-password").removeClass("form-control is-invalid")
        $("#register-password").addClass("form-control is-valid");
        flagPas=true;
      }
    })
    /*验证确认密码*/
    $("#register-passwords").change(function(){
      passWords=$("#register-passwords").val();
      if((passWord!=passWords)||(passWords.length<6||passWords.length>12)){
        $("#register-passwords").removeClass("form-control is-valid")
        $("#register-passwords").addClass("form-control is-invalid");
        flagPass=false;
      }else{
        $("#register-passwords").removeClass("form-control is-invalid")
        $("#register-passwords").addClass("form-control is-valid");
        flagPass=true;
      }
    })


    $("#regbtn").click(function(){
      if(flagName&&flagPas&&flagPass){
        localStorage.setItem("name",name);
        localStorage.setItem("passWord",passWord);
        // location="login.html"
      }else{
        if(!flagName){
          $("#register-username").addClass("form-control is-invalid");
        }
        if(!flagPas){
          $("#register-password").addClass("form-control is-invalid");
        }
        if(!flagPass){
          $("#register-passwords").addClass("form-control is-invalid");
        }
      }
    })
  })




</script>
</body>
</html>